<template>
    <div id='tmpl'>
        <div class="row" v-for="(item,index) in datalist">
            <mt-switch class="switch" v-model="value[index]"></mt-switch>
            <img class="img" :src="item.thumb_path" alt="商品图片">
            <div class="inforight">
                <h4 v-text="item.title"></h4>
                <div class="bottom">
                    <ul>
                        <li>￥{{item.sell_price}}</li>
                        <li>
                            <carinputnumber :initCount="item.cou" :goodsid="item.id" v-on:cardataobj="getInputNumber"></carinputnumber>
                        </li>
                        <li>
                            <a href="javascript:void(0)" @click="delrow(item.id,index)">删除</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="total">
            <div class="desc">
                <ul>
                    <li>总计（不含运费）</li>
                    <li>已勾选商品{{totalcount}}件,总价:￥{{totalAmount}}元</li>
                </ul>
            </div>
            <div id="button">
                <mt-button type="danger" size="small">去结算</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
import carinputnumber from '../subcom/carinputnumber.vue';
import { getobject, updatalist, removeItem } from '../../kits/localStorage.js';
export default {
    components: {
        carinputnumber
    },
    data() {
        return {
            datalist: [],
            value: [],
            totalAmount: 0
        }
    },
    computed: {
        totalcount() {
            var arrtrue = this.value.filter(function (item) { return item });

            var Amount = 0;
            this.value.forEach((item, index) => {
                if (item) {
                    console.log(this.datalist[index]);
                    var thisAmount = this.datalist[index].cou * this.datalist[index].sell_price;
                    Amount += thisAmount;
                }
            })
            this.totalAmount = Amount;
            return arrtrue.length;
        }
    },
    created() {
        this.getdatalisg();
    },
    methods: {
        getInputNumber(obj) {
            //更新localstorage中的数据
            updatalist(obj);
            //更新datalist的数据
            for (var i = 0; i < this.datalist.length; i++) {
                if (this.datalist[i].id == obj.goodsid) {
                    if (obj.type == 'add') {
                        this.datalist[i].cou = this.datalist[i].cou + 1;
                    } else {
                        this.datalist[i].cou = this.datalist[i].cou - 1;
                    }
                    break;
                }
            }
        },
        getdatalisg() {
            var objectlocal = getobject();
            //console.log(objectlocal);//objectlocal = {87: 2, 88: 2}
            var objectstr = '';
            for (var key in objectlocal) {
                objectstr += key + ',';
            }
            objectstr = objectstr.substring(0, objectstr.length - 1);
            var url = this.$common.apidomain + '/api/goods/getshopcarlist/' + objectstr;
            this.$http.get(url).then(function (res) {
                var that = this;
                res.body.message.forEach(function (element) {
                    //找到objectlocal的id所对应的数量赋值给api获取到的数据的cou然后渲染到页面上
                    element.cou = objectlocal[element.id];
                    that.value.push(false);
                });
                this.datalist = res.body.message;
            })
            
        },
        //点击删除按钮删除相应的商品
        delrow(shopid, index) {
            this.datalist.splice(index,1);
            this.value.splice(index,1);
            removeItem(shopid);
        }
    }

}
</script>
<style scoped>
.row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    height: 102px;
    display: flex;
    padding-top: 10px;
}

.switch {
    flex: 0 0 52px;
}

.img {
    margin-left: 5px;
    height: 75px;
    width: 75px;
    flex: 0 0 85px;
}

.inforight {
    margin-left: 5px;
    flex: 1;
}

.inforight ul {
    padding-left: 0px;
}

.inforight li {
    list-style: none;
    display: inline-block;
}


.inforight h4 {
    color: #0094ff;
    font-size: 14px;
}

.bottom li:first-child {
    color: red;
    margin-right: 10px;
}

.bottom li:last-child {
    margin-left: 10px;
}

#total {
    height: 100px;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    padding: 5px;
    ;
}

#total ul {
    padding-left: 0px;
}

#total li {
    list-style: none;
    font-size: 14px;
}

#button {
    flex: 0 0 60px;
    margin: 30px 0 0 0;
}

.desc {

    flex: 1;
}
</style>

